<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自适应显示多个点标记</title>
    <link rel="stylesheet" href="{$protocol}cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .info-tip {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            background-color: #fff;
            height: 35px;
            text-align: left;
        }
    </style>
    <script src="{$protocol}cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="{$protocol}webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script src="__PUBLIC__/js/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: {$alarm_local},
        zoom: 13
    });
    map.clearMap();  // 清除地图覆盖物
    var markers = [{
        type: "alarm",
        icon: '{$protocol}webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
        position: {$alarm_local},
        pixel : [20,-10],
        title:"报警地址",
        content:"{$alarm_address}"
    }, {
        type: "start",
        icon: '{$protocol}webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
        position: {$start_local},
        pixel : [20,20],
        title:"预约上车地址",
        content:"{$start_name}"
    }, {
        type: "arrive",
        icon: '{$protocol}webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
        position: {$arrive_local},
        pixel : [20,20],
        title:"预约下车地址",
        content:"{$arrive_name}"
    }];
    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    markers.forEach(function(marker) {
        var mk = new AMap.Marker({
            map: map,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-12, -36)
        });
        mk.setTitle(marker.title+ ":" + marker.content);
        mk.setLabel({
            offset: new AMap.Pixel(marker.pixel[0], marker.pixel[1]),
            content: "<span style='color: red'>" + marker.title + "</span>" + ":" + marker.content
        });
    });
    window.onload = initMap;
    var marker, timeVal, images = {$images}, cycle = 15000;
    function initMap(type) {
        $.get('{$url}', {}, function (res) {
            if (res['status']) {
                var data = res['data'];
                marker = new AMap.Marker({
                    position: new AMap.LngLat(data['location']['coordinates'][0], data['location']['coordinates'][1]),
                    offset: new AMap.Pixel(-20, -10),
                    angle: data['direction'],
                    title: data['tip'],
                    label: {'offset': new AMap.Pixel(20, 20), 'content': data['tip']},
                    icon: new AMap.Icon({
                        size: new AMap.Size(41, 19),  //图标大小
                        image: images[data['img']],
                        imageSize: new AMap.Size(41, 19),
                    })
                });
                marker.setMap(map);
                timeVal = setInterval(updateMarker, cycle);
            } else {
                alert(res['msg']);
            }
            map.setFitView();
        });
    }
    function updateMarker() {
        $.get('{$url}', {}, function (res) {
            switch (res['status']) {
                case 1:
                    var data = res['data'];
                    map.remove(marker);
                    map.setZoomAndCenter(16, new AMap.LngLat(data['location']['coordinates'][0], data['location']['coordinates'][1]));
                    marker = new AMap.Marker({
                        position: new AMap.LngLat(data['location']['coordinates'][0], data['location']['coordinates'][1]),
                        offset: new AMap.Pixel(-20, -10),
                        angle: data['direction'],
                        title: data['tip'],
                        label: {'offset': new AMap.Pixel(20, 20), 'content': data['tip']},
                        icon: new AMap.Icon({
                            size: new AMap.Size(41, 19),  //图标大小
                            image: images[data['img']],
                            imageSize: new AMap.Size(41, 19),
                        })
                    });
                    marker.setMap(map);
                    break;
                default:
                    alert(res['msg']);
                    clearInterval(timeVal);
                    break;
            }
        });
    }
</script>
</body>
</html>